<template>
    <div id="authority">
        <div class="quanxian">
            <el-tabs v-model="activeName">
                <el-tab-pane label="管理员管理" name="first">
                    <!-- <button @click="getadminerList">1111</button> -->
                    <div class="ati_card">
                        <ul>
                            <li v-for="(item, index) in gridData" :key="index">
                                <el-card class="box-card">
                                    <div class="tag-group">
                                        <span class="tag-group__title"></span>
                                        <el-tag v-for="item in items" :key="item.label" :type="item.type" effect="dark">
                                            {{ item.label }}
                                        </el-tag>
                                    </div>
                                    <div slot="header" class="clearfix">
                                        <span>{{item.id}} {{item.role_name}}</span>
                                        <el-button type="primary" class="btn_bianji" plain>编辑</el-button>
                                        <el-button type="danger" plain class="btn_shanchu">删除</el-button>
                                    </div>
                                    <div v-for="o in card" :key="o" class="text item">
                                        {{ o }}
                                    </div>
                                    <span class="ati_phone">{{item.phone}}</span>
                                    <span class="ati_e-mail">{{item.email}}</span>
                                    <span class="ati_name">{{item.real_name}}</span>
                                    <span class="ati_ip">{{item.login_ip}}</span>
                                    <span class="ati_time">{{item.login_time}}</span>
                                </el-card>
                            </li>
                        </ul>

                        <!-- <el-card class="box-card"> -->
                        <!-- <div class="tag-group"> -->
                        <!-- <span class="tag-group__title"></span> -->
                        <!-- <el-tag v-for="item in items" :key="item.label" :type="item.type" effect="dark"> -->
                        <!-- {{ item.label }} -->
                        <!-- </el-tag> -->
                        <!-- <el-tag type="success" label='财务'>财务 -->
                        <!-- </el-tag> -->
                        <!-- </div> -->
                        <!-- <div slot="header" class="clearfix"> -->
                        <!-- <span>01 牛奶煮萝莉</span> -->
                        <!-- <el-button type="primary" class="btn_bianji" plain>编辑</el-button> -->
                        <!-- <el-button type="danger" plain class="btn_shanchu">删除</el-button> -->
                        <!-- </div> -->
                        <!-- <div v-for="o in card" :key="o" class="text item"> -->
                        <!-- {{o}} -->
                        <!-- </div> -->
                        <!-- <span class="ati_phone">13529515236</span> -->
                        <!-- <span class="ati_e-mail">2659653541@qq.com</span> -->
                        <!-- <span class="ati_name">张珊珊</span> -->
                        <!-- <span class="ati_ip">299.233.20.00</span> -->
                        <!-- <span class="ati_time">2021-08-23 08:36:59</span> -->
                        <!-- </el-card> -->
                    </div>

                    <el-button class="btn_tj" type="primary" @click="dialogTableVisible = true">添加</el-button>

                    <el-dialog title="管理员编辑" :visible.sync="dialogTableVisible">
                        <el-form :model="formadminer">
                            <el-form-item label="用戶名" :label-width="formLabelWidth">
                                <el-input v-model="formadminer.username" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" :label-width="formLabelWidth">
                                <el-input v-model="formadminer.password" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码" :label-width="formLabelWidth">
                                <el-input v-model="formadminer.confirmPwd" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="真实姓名" :label-width="formLabelWidth">
                                <el-input v-model="formadminer.realName" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号" :label-width="formLabelWidth">
                                <el-input v-model="formadminer.phone" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="e-mail" :label-width="formLabelWidth">
                                <el-input v-model="formadminer.email" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="所属角色" :label-width="formLabelWidth">
                                <el-select v-model="form.region" placeholder="">
                                    <el-option label="" value=""></el-option>
                                    <el-option label="" value=""></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button class="btn_qd" type="primary" @click="adminer">确 定</el-button>
                        </div>

                    </el-dialog>
                    <div class="block">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChanges"
                            :current-page.sync="currentPage1" :page-sizes="pagesizes" background
                            layout="total, prev, pager, next" :total="totals">
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <!-- 角色管理 -->
                <el-tab-pane label="角色管理" name="second">
                    <!-- <button @click="getauthority">111</button> -->
                    <div class="tj_btn">
                        <el-button type="success" @click="dialogFormVisible = true">添加</el-button>

                        <el-dialog title="角色编辑" :visible.sync="dialogFormVisible">
                            <el-form :model="form">
                                <el-form-item label="角色名称" :label-width="formLabelWidth">
                                    <el-input v-model="form.roleName" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="角色颜色" :label-width="formLabelWidth">
                                    <el-select v-model="form.region" placeholder="请选择活动区域">
                                        <el-option label="区域一" value="shanghai"></el-option>
                                        <el-option label="区域二" value="beijing"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="角色描述" :label-width="formLabelWidth">
                                    <el-input v-model="form.represent" autocomplete="off" class="brief"></el-input>
                                </el-form-item>
                                <el-form-item label="是否启用" :label-width="formLabelWidth">
                                    <el-radio v-model="form.state" label="1">启用</el-radio>
                                    <el-radio v-model="form.state" label="2">不启用</el-radio>

                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="getaddRole">确 定</el-button>
                            </div>
                        </el-dialog>
                    </div>
                    <div class="name_card" v-loading="loading">
                        <ul>
                            <li v-for="(item,index) in roleList" :key="index">
                                <div class="_jingli">
                                    <span class="lt_jingli">{{item.id}} {{item.role_name}}</span>
                                </div>
                                <div class="tuoyuan">
                                    <img src="../image/椭圆 522.png" alt="" />
                                </div>
                                <div class="juesemiaoshu"><span>角色描述</span></div>
                                <div class="caiwucx">
                                    <span>{{item.represent}}</span>
                                </div>
                                <div class="zhuangtai"><span>状态</span></div>
                                <div class="zhengchang" v-if='item.state==1'>启用</div>
                                <div class="zhengchang" v-else>不启用</div>
                                <div><img src="../image/矩形 11 拷贝 16.png" alt="" /></div>
                                <div class="btn_three">
                                    <ul>
                                        <li>
                                            <el-button class="shanchu_btn" @click="role_delete" type="danger" plain>删除
                                            </el-button>
                                        </li>
                                        <li>
                                            <el-button class="quanxian_btn" type="success" plain
                                                @click="dialogFormVisible = true">权限</el-button>
                                            <!-- <el-dialog -->
                                            <!-- title="权限设置-经理" -->
                                            <!-- :visible.sync="dialogFormVisible" -->
                                            <!-- > -->
                                            <!-- <template> -->
                                            <!-- <el-transfer -->
                                            <!-- v-model="value" -->
                                            <!-- :data="data" -->
                                            <!-- ></el-transfer> -->
                                            <!-- </template> -->
                                            <!-- <div slot="footer" class="dialog-footer"> -->
                                            <!-- <el-button @click="dialogFormVisible = false" -->
                                            <!-- >取 消</el-button -->
                                            <!-- > -->
                                            <!-- <el-button -->
                                            <!-- type="primary" -->
                                            <!-- @click="dialogFormVisible = false" -->
                                            <!-- >确 定 -->
                                            <!-- </el-button> -->
                                            <!-- </div> -->
                                            <!-- </el-dialog> -->
                                        </li>
                                        <li>
                                            <el-button class="bianji_btn" type="primary" plain>编辑</el-button>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <div class="block">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page.sync="currentPage2" :page-size="pagesize" background
                            layout="total, prev, pager, next" :total="total">
                        </el-pagination>
                    </div>
                </el-tab-pane>

            </el-tabs>
        </div>







    </div>
</template>
<script>
    import { getroleList, getaddRole, getadminerList, getaddAdmin } from "../request/index";
    export default {
        name: "Authority",
        data() {
            const generateData = (_) => {
                const data = [];
                for (let i = 1; i <= 15; i++) {
                    data.push({
                        key: i,
                        label: `备选项 ${i}`,
                        // disabled: i % 4 === 0
                    });
                }
                return data;
            };
            return {
                totals: null,
                pagesizes: null,
                loading: false,
                pagesize: null,
                currentPage1: null,
                currentPage2: null,
                total: null,
                roleList: [],
                data: generateData(),
                radio: '1',
                value: [1, 4],
                card: ["手机号", "e-mail", "真是姓名", "最后登录IP", "最后登录时间"],
                gridData: [],
                dialogTableVisible: false,
                dialogFormVisible: false,
                checked: true,
                nochecked: false,
                formadminer: {
                    username: "",
                    password: "",
                    realName: "",
                    phone: "",
                    email: "",
                    confirmPwd: ""
                },
                form: {

                    roleName: "",
                    represent: "",
                    state: '1',

                },
                formLabelWidth: "120px",
                items: [{ type: "", label: "经理" }],
                activeName: "first",
            };
        },
        methods: {
            //管理员页面翻页
            handleCurrentChanges(val) {
                console.log(val);
                let data = {
                    page: val
                }
                getadminerList(data).then(res => {
                    console.log(res);
                    this.gridData = res.list
                })
            },
            //添加管理员
            adminer() {
                // console.log(11111);
                getaddAdmin(this.formadminer).then(res => {
                    console.log(res);

                    this.getadminerList()
                    if (res.code == "666") {
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        })
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        })
                    }
                    this.dialogTableVisible = false
                })
            },
            //管理员管理列表
            getadminerList() {
                getadminerList().then(res => {
                    console.log(res);
                    this.gridData = res.list
                    this.totals = res.count

                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            //角色页翻页
            handleCurrentChange(val) {
                console.log("当前页：", val);
                this.loading = true
                setTimeout(() => {
                    getroleList({ page: val }).then(res => {
                        console.log(res);
                        this.roleList = res.list

                    })
                    this.loading = false
                }, 1000)
            },
            //请求角色列表
            getauthority() {
                console.log(1111);
                getroleList().then(res => {
                    console.log(res);
                    this.roleList = res.list
                    this.total = res.count
                    this.pagesize = res.pageSize
                })
            },
            //删除角色
            role_delete() {
                console.log(11111);

            },
            //添加角色
            getaddRole() {
                console.log(1111)
                getaddRole(this.form).then(res => {
                    console.log(res);
                    this.getauthority()
                    if (res.code == "666") {
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        })
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        })
                    }
                    this.dialogTableVisible = false

                })
            },
            dialogFormVisible() {
                console.log(111);
            }
        },
        mounted() {
            this.getauthority(),
                this.getadminerList()
        },
        destroyed() {
            console.log("组件销毁了");
        },
    };
</script>
<style scoped>
    div /deep/ .el-tabs__nav-scroll {
        overflow: hidden;
        background-color: #fff;
    }

    div /deep/ .el-tabs__item:hover {
        color: #409EFF;
        cursor: pointer;
    }

    div /deep/ .el-tabs__item.is-active {
        color: #409EFF !important;
    }

    div /deep/ .el-input__inner {
        -webkit-appearance: none;
        background-color: #FFF;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 40px;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        width: 300px;
    }

    div /deep/ .el-tabs__item {
        padding: 0 20px;
        height: 40px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        line-height: 40px;
        display: inline-block;
        list-style: none;
        font-size: 16px;
        font-weight: 700;
        color: #303133;
        position: relative;
    }

    .block {
        position: absolute;
        bottom: 30px;
        left: 600px;
    }

    div /deep/ .el-transfer {
        font-size: 14px;
        margin-left: 170px;
        /* margin: auto; */
    }

    div /deep/ .brief {
        width: 500px;
        height: 20px;
    }

    .ati_card>ul>li {
        display: inline-block;
        float: left;
        margin-left: 12px;
        margin-top: 15px;
    }

    .ati_card>ul>li {
        width: 385px;
        height: 350px;
        /* background-color: hotpink; */
    }

    .bianji_btn {
        width: 0.5rem;
        height: 0.18rem;
    }

    .quanxian_btn {
        width: 0.5rem;
        height: 0.18rem;
    }

    .shanchu_btn {
        width: 0.5rem;
        height: 0.18rem;
    }

    .btn_three>ul>li {
        float: left;
        margin-left: 0.1rem;
    }

    .zhengchang {
        position: absolute;
        top: 0.6rem;
        left: 0.7rem;
    }

    .zhuangtai {
        margin-top: 0.2rem;
        margin-left: 0.1rem;
    }

    .caiwucx {
        position: absolute;
        top: 0.32rem;
        left: 0.7rem;
    }

    .juesemiaoshu {
        margin-top: 0.1rem;
        margin-left: 0.1rem;
        display: inline-block;
    }

    .tuoyuan {
        position: absolute;
        right: 0.05rem;
        top: 0.05rem;
    }

    ._jingli {
        margin-top: 0.1rem;
        margin-left: 0.1rem;
    }

    .lt_jingli {
        font-size: 0.08rem;
        font-weight: 700;
    }

    .name_card {
        position: relative;
        top: 0.35rem;
        width: 100%;
        height: 4rem;
        /* background-color:red; */
    }

    .name_card>ul>li {
        width: 1.85rem;
        height: 1.1rem;
        position: relative;
        background-color: #fff;
        float: left;
        margin-left: 0.1rem;
        margin-top: 0.1rem;
        border-radius: 0.02rem;
    }

    .tj_btn {
        float: right;
        margin-right: 0.1rem;
        margin-top: 0.1rem;
    }

    .el-tabs__nav-scroll {
        overflow: hidden;
        background-color: #fff;
    }

    .btn_bianji[data-v-1e51160e] {
        position: absolute;
        bottom: 30px;
        right: 30px;
        width: 134px;
    }

    .name_btn {
        width: 0.5rem;
        height: 0.2rem;
    }

    .btn_shanchu[data-v-1e51160e] {
        position: absolute;
        bottom: 30px;
        left: 20px;
        width: 134px;
    }

    .btn_bianji {
        position: absolute;
        bottom: 30px;
        right: 30px;
    }

    .btn_shanchu {
        position: absolute;
        bottom: 30px;
        left: 20px;
    }

    .el-card {
        border: 1px solid #ebeef5;
        background-color: #fff;
        color: #303133;
        -webkit-transition: 0.3s;
        transition: 0.3s;
        height: 360px;
        width: 200px;
    }

    div /deee/ .box-card[data-v-1e51160e] {
        width: 2rem !important;
    }

    .box-card {
        position: relative;
        display: inline-block;
        margin-left: 30px;
    }

    .tag-group {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .ati_time {
        position: absolute;
        top: 229px;
        left: 160px;
    }

    .ati_ip {
        position: absolute;
        top: 190px;
        left: 160px;
    }

    .ati_name {
        position: absolute;
        top: 155px;
        left: 160px;
    }

    .ati_e-mail {
        position: absolute;
        top: 115px;
        left: 160px;
    }

    .ati_phone {
        /* display: inline-block; */
        position: absolute;
        top: 78px;
        left: 160px;
    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both;
    }

    .box-card {
        width: 385px;
        height: 350px;
    }

    .ati_card {
        width: 100%;
        height: 1250px;
        /* background-color: pink; */
        position: relative;
        top: 80px;
    }

    .btn_qd {
        width: 150px;
        position: absolute;
        bottom: 13px;
        right: 500px;
    }

    .quanxian {
        /* background-color: #fff; */
        width: 100%;
        height: 100%;
        margin-top: 10px;
        position: relative;
        /* background-color: skyblue; */
    }

    .btn_tj {
        background-color: #69c243;
        position: absolute;
        right: 0;
        top: 0;
        border: 1px solid #69c243;
        width: 100px;
    }

    .el-form {
        margin-left: 150px;
        margin-top: 15px;
    }

    .el-dialog__header {
        margin-left: 300px;
    }

    #authority {
        width: 100%;
        height: 800px;
        /* background-color: red; */
    }

    div /deep/ .box-card[data-v-53d32885] {
        width: 2rem;
    }

    div#pane-second {
        height: 850px;
    }
</style>